<!--
 * @Author: your name
 * @Date: 2021-05-24 16:06:40
 * @LastEditTime: 2021-06-06 22:18:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \遵义报名\zunyi\src\views\register\register.vue
-->
<template>
  <div class="register">
    <!-- 页头 -->
    <h2 class="page-title">请填写基本信息</h2>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 表单 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="8">
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="name">
            <myinput v-model="form.name"></myinput>
          </el-form-item>

          <!-- 电话 -->
          <el-form-item label="电话" prop="phone">
            <myinput v-model="form.phone"></myinput>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="onSubmit('form')">注册</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { url } from "api/register.js";
import { wxLogin } from "api/wxLogin.js";

export default {
  data() {
    return {
      form: {
        name: "", //姓名
        phone: "", //电话
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            trigger: "blur",
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请输入正确的手机号码",
          },
        ],
      },
      openid: "",
      unionid: "",
    };
  },
  methods: {
    API_register() {//注册
      return this.$httpRequest({
        url: url,
        method: "POST",
        data: {
          data: {
            name: this.form.name,
            phone: this.form.phone,
            pcopenid: this.openid,
            wxuid: this.unionid,
          },
        },
      });
    },
    API_wxLogin() {//登录
      return this.$httpRequest({
        url: wxLogin,
        method: "POST",
        data: {
          param: {
            // openid: this.openid,
            unionid: this.unionid,
          },
        },
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await this.API_register(); //注册

          if (res.data.code === 1000) {
            //注册成功
            this.$message.success(res.data.msg);
            let loginRes = await this.API_wxLogin(); //登录

            if (loginRes.data.code === 1000) {
              //登录成功
              this.$message.success(loginRes.data.msg);
              localStorage.setItem(
                "zunyi_pc_token",
                loginRes.data.data.jwttoken
              );

              this.$router.push("/home");
            } else {
              this.$message.error(res.data.msg);
            }
          } else {
            //注册失败
            this.$message.error(res.data.msg);
          }
        } else {
          console.log("提交失败");
          return false;
        }
      });
    },
  },
  async created() {
    let { isRegister } = this.$route.query; //获取路由信息

    if (isRegister === "0") {
      //【未注册】
      let { openid, unionid } = this.$route.query; //获取路由信息

      this.openid = openid;
      this.unionid = unionid;
    } else {
      //【已注册】
      let { token } = this.$route.query; //获取路由信息

      localStorage.setItem("zunyi_pc_token", token);
      
      this.$router.push("/home");
    }
  },
};
</script>

<style lang="scss" scoped>
@import "style/views/register.scss";
</style>